<template>
  <div>
    <div class="node" v-has="{action: 'operator:list', effect: 'move'}">
      <div class="search_box topSelect">
      </div>
      <Panel title="运营商"  :intro="intro">
        <div slot='ext' class="examine">
          <el-button  size="small" class="button-offt" plain icon="el-icon-refresh" @click="()=>getQueryData()">刷新数据</el-button>
          <el-button v-has="{action: 'operator:add', effect: 'move'}" class="button-offt" type="success" icon="el-icon-plus" @click="()=>editStore()">新增</el-button>
      </div>
      <TableEncapsulation
        slot="body"
        :tableConfig="tableConfig"
        :tableData="tableData"
      >
      <template slot="operation" slot-scope="operation">
          <el-button size="mini" icon="el-icon-edit"
             v-has="{action: 'operator:update', effect: 'move'}"
              @click="()=>editStore(operation.row)"
            >编辑</el-button>
          </template>
          <TablePager
            slot="pager"
            v-if="pager.use"
            :size="pager.size"
            :pageChange="pageChange"
            :show-total="pager.showTotal"
            :total="pager.total"
            :current="pager.current"
          >
            <span class="demonstration">GO></span>
          </TablePager>
      </TableEncapsulation>
      </Panel>
      <!-- 添加编辑 start-->
      <ModalPanel 
        :visible='add'
        title="添加/编辑"
        :onCancel="onCancelAdd"
        class="bannerDialog"
        :onOk="onSubmit">
        <div>
          <ModifyForm
            padding='50px'
            :hiddenBtn='true'
            :editColumn='editColumnadd'
            :updateData="updateDataAdd"
            labelWidth='100px'
            ref="configModal"
            class="ModifyForm"
            :temporaryData='modalDataAdd'>
          </ModifyForm>
        </div>
      </ModalPanel>
      <!-- 添加编辑end -->
    </div>
    <div style="display: none;width:100%;height:100%;margin: auto;" v-has="{action: 'operator:list', effect: 'noPremiss'}">
      <NoPremission></NoPremission>
    </div>
  </div>
</template>
<script>
import request from "@/tools/request";
import Panel from "@/components/Panel";
import TableEncapsulation from "@/components/TableEncapsulation";
import TablePager from "@/components/Pager";
import SearchInput from "@/components/SearchInput";
import { objectFilter } from "@/tools/array";
import ModifyForm from "@/components/ModifyForm";
import ModalPanel from "@/components/ModalPanel";
export default {
  name: "thirdCompany",
  components: {
    TableEncapsulation,
    TablePager,
    Panel,
    SearchInput,
    ModifyForm,
    ModalPanel
  },
  data() {
    return {
      intro:{
        title: '互联互通公司-介绍文档',
        content:`<ul><li><strong>合作的第三方公司列表</strong></li><li><br></li><li><strong>注意：</strong></li></ul><ol><li class="ql-indent-1">第三方公司充电费结算采用预存方式，第三方向我方打款预存电费，我方核实后，进行‘充值’操作；可设置第三方可欠费金额。</li><li class="ql-indent-1">创建第三方公司后，需要映射站点和配置费率，第三方平台用户才能正常充电</li></ol>`
      },
      visible:false,
      siteList:[],
      company:[],
      modalData:{},
      tableData: [],
      query: {
        page: 1
      },
      pager: {
        use: true,
        total: 0,
        current: 1,
        size: 10,
        showTotal: true
      },
      name: '',
      operation: true,
      //添加编辑
      add:false,
      modalDataAdd:{},
      editColumnadd: [
        {
          name: "运营商名称",
          prop: "operatorName",
          type: "text",
          width:24,
          required: true
        },
        {
          name: "运营商编码",
          prop: "operatorSn",
          type: "text",
          width:24,
          required: false
        },
         {
          name: "统一社会信用代码",
          prop: "operatorUscsn",
          type: "text",
          width:24, 
          required: false
        },
        {
          name: "运营商电话",
          width: 24,
          prop: "operatorTel",
          type: "number",
          required: true,
        },
        {
          name: "运营商卡号",
          prop: "operatorCard",
          type: "number",
          width:24, 
          required: false
        },
        {
          name: "运营商开户行",
          prop: "operatorBank",
          type: "number",
          width:24, 
          required: false
        },
        {
          name: "运营商地址",
          prop: "operatorAddress",
          type: "number",
          width:24, 
          required: false
        },
        {
          name: "运营商分账账号",
          width: 24,
          prop: "operatorShareAccount",
          type: "text",
          required: false
        },
      ],
      //添加编辑end
    };
  },
  mounted() {
    this.getQueryData();
  },
  
  computed: {
    tableConfig () {
      return {
        selection: true,
        columnConfig: [
       
          {
            label: "运营商名称",
            type: "text",
            prop: "operatorName",
            align: "center"
          },
          {
            label: "运营商编码",
            type: "text",
            prop: "operatorSn",
            align: "center",
            width:120
          },
          {
            label: "统一社会信用代码",
            type: "text",
            prop: "operatorUscsn",
            align: "center"
          },
          {
            label: "运营商电话",
            type: "text",
            prop: "operatorTel",
            align: "center"
          },
           {
            label: "运营商卡号",
            type: "text",
            prop: "operatorCard",
            align: "center"
          },
           {
            label: "运营商开户行",
            type: "text",
            prop: "operatorBank",
            align: "center"
          },
          {
            label: "运营商地址",
            type: "text",
            prop: "operatorAddress",
            align: "center"
          },
          {
            label: "运营商分账账号",
            type: "text",
            prop: "operatorShareAccount",
            align: "center"
          },
         
          this.operation && {
            type: "operation",
            align: "center",
            label: "操作",
            width:220
          }
        ].filter(Boolean)
        }
    }
  },
  methods: {
    async getQueryData() {
       let current =  this.pager.current
       let size =  this.pager.size
      let search = objectFilter({ current,size})
      const res = await request({
        url: "/manage/operator/query",
        method: "POST",
        data: search
      });
      this.tableData = res.data.records
      this.pager.total = res.data.total
      this.pager.current = res.data.current
    },
    pageChange(val) {
      this.pager.current = val;
      this.getQueryData();
    },
    changeSearch(key, val) {
      this[key] = val;
      this.pager.current = 1;
    },
    onCancel(){
      this.visible = false
    },
    //添加编辑start
    editStore(rowData){
      if(rowData){
        this.modalDataAdd = {...rowData}
      }else{
        this.modalDataAdd ={}
      }
      this.add = true
    },
    async onSubmit(){
      this.$refs['configModal'].onSubmit()
    },
    onCancelAdd(){
      this.add = false
    },
    async updateDataAdd(values){
      const {id, operatorName, operatorSn, operatorUscsn, operatorTel, operatorCard,  operatorBank,  operatorAddress, operatorShareAccount} = values
      let url = id ? "/manage/operator/update": "/manage/operator/add"
      let msg = id ? "编辑成功" : "添加成功"
      let res = await request({
        url: url,
        method: "POST",
        data:{id, operatorName, operatorSn, operatorUscsn, operatorTel, operatorCard,  operatorBank,  operatorAddress, operatorShareAccount}
      })
      if(res.code !==0) return
        this.$message.success(msg)
        this.add = false
        this.getQueryData();
    },
    //添加编辑end
  }
}
</script>
<style lang='scss' >

</style>